<template>
  <view class="login-page">
    <!-- 头部标题区域 -->
    <view class="header">
      <text class="logo-text">云厨</text>
      <text class="subtitle-text">发现美食，分享生活</text>
    </view>
    
    <!-- 登录/注册表单容器 -->
    <view class="form-container">
      <!-- 切换标签 -->
      <view class="tab-container">
        <view class="tab" :class="{ active: currentTab === 'login' }" @click="switchTab('login')">
          <text>登录</text>
        </view>
        <view class="tab" :class="{ active: currentTab === 'register' }" @click="switchTab('register')">
          <text>注册</text>
        </view>
      </view>
      
      <!-- 登录表单 -->
      <view class="form-content" v-if="currentTab === 'login'">
        <view class="form-item">
          <text class="label">用户名</text>
          <input type="text" v-model="loginForm.username" placeholder="请输入用户名" class="input" placeholder-style="color: #999;" />
        </view>
        
        <view class="form-item">
          <text class="label">密码</text>
          <input type="password" v-model="loginForm.password" placeholder="请输入密码" class="input" placeholder-style="color: #999;" />
        </view>
        
        <view class="form-actions">
          <text class="forgot-password" @click="handleForgotPassword">忘记密码？</text>
        </view>
        
        <button class="submit-button" @click="handleLogin">登录</button>
      </view>
      
      <!-- 注册表单 -->
      <view class="form-content" v-if="currentTab === 'register'">
        <view class="form-item">
          <text class="label">用户名</text>
          <input type="text" v-model="registerForm.username" placeholder="请设置用户名" class="input" placeholder-style="color: #999;" />
        </view>
        
        <view class="form-item">
          <text class="label">邮箱</text>
          <input type="email" v-model="registerForm.email" placeholder="请输入邮箱" class="input" placeholder-style="color: #999;" />
        </view>
        
        <view class="form-item">
          <text class="label">密码</text>
          <input type="password" v-model="registerForm.password" placeholder="请设置密码" class="input" placeholder-style="color: #999;" />
        </view>
        
        <view class="form-item">
          <text class="label">确认密码</text>
          <input type="password" v-model="registerForm.confirmPassword" placeholder="请再次输入密码" class="input" placeholder-style="color: #999;" />
        </view>
        
        <button class="submit-button" @click="handleRegister">注册</button>
      </view>
    </view>
    

  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {postLogin, postRegister} from '/apis/index.js'

const router = useRouter()

// 当前激活的标签页
const currentTab = ref('login')

// 登录表单数据
const loginForm = ref({
  username: '',
  password: ''
})

// 注册表单数据
const registerForm = ref({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
})

// 切换登录/注册标签
const switchTab = (tab) => {
  currentTab.value = tab
}

// 处理登录
const handleLogin = async() =>{
	// console.log('登录信息:', loginForm.value)
	try {
		const data = await postLogin(loginForm.value)
		// 存储token信息
		if(data.token) {
			uni.setStorageSync('token', data.token)
		}
		// 存储用户信息
		if(data.user) {
			uni.setStorageSync('userInfo',JSON.stringify(data.user))
		}
		// 跳转到今日推荐页面
		if (data && data.success) {
			uni.switchTab({
				url:'/pages/today/today'
			})
		}
	}catch(err) {
		console.log("登录失败:",err)
	}
}

// 处理注册
const handleRegister = async() => {
  // console.log('注册信息:', registerForm.value)
  try {
	  const result = await postRegister(registerForm.value)
	  console.log(result)
    currentTab.value = 'login';
  }catch(err) {
	  console.log("注册失败：",err)
  }
};

// 处理忘记密码
const handleForgotPassword = () => {
  console.log('忘记密码');
  // 用户后续自行实现忘记密码逻辑
};


</script>

<style lang="scss" scoped>
.login-page {
  // min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  box-sizing: border-box;
}

// 头部标题区域
.header {
  text-align: center;
  margin-bottom: 40px;
  width: 100%;
}

.logo-text {
  font-size: 36px;
  font-weight: bold;
  color: #ff6b6b;
  display: block;
  margin-bottom: 10px;
}

.subtitle-text {
  font-size: 16px;
  color: #666;
}

// 表单容器
.form-container {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

// 标签切换
.tab-container {
  display: flex;
  margin-bottom: 30px;
  border-bottom: 1px solid #f0f0f0;
}

.tab {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.tab.active {
  color: #ff6b6b;
  font-weight: 500;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 25%;
  width: 50%;
  height: 3px;
  background-color: #ff6b6b;
  border-radius: 3px;
}

// 表单内容
.form-content {
  width: 100%;
}

.form-item {
  margin-bottom: 24px;
}

.label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

.input {
  width: 100%;
  height: 48px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 0 16px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.input:focus {
  outline: none;
  border-color: #ff6b6b;
}

// 表单操作
.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
}

.forgot-password {
  font-size: 14px;
  color: #1890ff;
  cursor: pointer;
}

// 提交按钮
.submit-button {
  width: 100%;
  height: 48px;
  background-color: #ff6b6b;
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s;
  outline: none;
  cursor: pointer;
}

.submit-button:active {
  background-color: #ff5252;
}


</style>